<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>

<body>
    <!-- form  -->
    <div id="app">
        <input type="text" v-model="msg">
        <textarea name="" id="" cols="30" rows="10" v-model="msg"></textarea>
        <!-- 单个多选框 -->
        <!-- <input type="checkbox" name="" id="" v-model="checked"><br> -->
        <!-- 多个多选框 -->
        <input type="checkbox" name="hobby" id="jijian" value="击剑" v-model="checkboxs">
        <label for="jijian">击剑</label><br>
        <input type="checkbox" name="hobby" id="douniu" value="斗牛" v-model="checkboxs">
        <label for="douniu">斗牛</label><br>
        <input type="checkbox" name="hobby" id="chaocai" value="炒菜" v-model="checkboxs">
        <label for="chaocai">炒菜</label><br>
        <p>{{checkboxs}}</p>

        <!-- 单选框 -->
        <input type="radio" name="sex" value="男" id="sex_body" v-model="radioValue"> <label for="sex_body">男</label>
        <input type="radio" name="sex" value="女" id="sex_gril" v-model="radioValue"><label for="sex_gril">女</label>
        <p>{{radioValue}}</p>
        <!-- 下拉列表为单选时，初始值则设置为""" -->
        <select name="" id="" v-model="selected">
            <option value="" disabled>请选择</option>
            <option value="111">111</option>
            <option value="222">222</option>
            <option value="333">333</option>
        </select>
        <p>{{selected}}</p>
        <!-- 下拉列表为多选时，初始值则设置为[] -->
        <select name="" id="" multiple v-model="selectedArr">
            <option value="" disabled>请选择</option>
            <option value="111">111</option>
            <option value="222">222</option>
            <option value="333">333</option>

        </select>
        <p>{{selectedArr}}</p>
    </div>
    <!-- 
        收集表达数据输入
        input  

     -->
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '你们上课的最后一天了！！',
                checked: true,
                checkboxs: [],
                radioValue: '',
                selected: '',
                selectedArr: []
            }
        })
    </script>

</body>

</html>